import { useState, useContext } from 'react'
import { StyleSheet, Image, TouchableOpacity, Button, ScrollView, Text, TextInput, View, Share, AppState, Appearance } from 'react-native';
import { useRouter, useLocalSearchParams, useGlobalSearchParams } from 'expo-router'
import { setStringAsync } from 'expo-clipboard'
import { AppDataContext } from '../AppDataContext'

export default function TabOneScreen() {
  const appData = useContext(AppDataContext)
  const router = useRouter()
  const [url, setUrl] = useState('https://baidu.com')
  const { data } = useLocalSearchParams<{ data?: string }>()

  const handleScan = () => {
    router.push('/camera')
  }
  const onCopy = async () => {
    await setStringAsync(data)
    alert('复制成功')
  }
  const handleOpenUrl = () => {
    router.push({ pathname: 'webViewer', params: { uri: url } })
  }
  console.log(AppState.currentState)
  console.log(Appearance.getColorScheme())
  const handleShare = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
        title: 'Hello 分享中'
      }, {
        dialogTitle: '那些年 那些事'
      });
      console.log(result)
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity type of result.activityType
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error: any) {
      Alert.alert(error.message);
    }
  }
  return (
    <ScrollView>
      <View style={styles.section}>
        <Text style={styles.title}>扫描二维码</Text>
        <View style={styles.textBox}>
          <Text style={styles.text}>{data}</Text>
          <Button title="复制" disabled={!data} onPress={onCopy} />
        </View>
        <Button title="扫码" color="black" onPress={handleScan} />
      </View>
      <View style={styles.section}>
        <Text style={styles.title}>打开链接</Text>
        <View style={styles.textBox}>
          <TextInput
            autoComplete="url"
            defaultValue={url}
            style={styles.textInput}
            onChangeText={newText => setUrl(newText)}
            placeholder="Type here to open"
          />
        </View>
        <Button disabled={!url} title="打开" color="black" onPress={handleOpenUrl} />
      </View>

      {/* <Text>Theme: {appData.theme}</Text> */}

      {/* <Button title="分享" onPress={handleShare}></Button> */}
      
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  section: {
    borderBottomWidth: 1,
    borderColor: '#ccc',
    paddingVertical: 10,
    paddingHorizontal: 20,
  },
  textBox: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 5,
    minHeight: 40,
    borderWidth: 1,
    borderColor: '#aaa',
    marginBottom: 10
  },
  text: {
    flex: 1
  },
  textInput: {
    width: '100%'
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10
  },
});
